<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/jsp/common/common.jsp" %>
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <title></title>
    <script src="/seeyon/apps_res/plugin/common/js/vue.min.js"></script>
    <script src="/seeyon/apps_res/plugin/common/js/iview.min.js"></script>
    <!-- <script src="/seeyon/apps_res/plugin/common/js/jquery.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="/seeyon/apps_res/plugin/relocationData/css/common.css">
    <link rel="stylesheet" type="text/css" href="/seeyon/apps_res/plugin/relocationData/css/content.css?v=2">
    <link rel="stylesheet" type="text/css" href="/seeyon/apps_res/plugin/common/css/iview.min.css">
    <style>
        .custom-pagination button {
            margin: 0 4px;
            width: 32px;
            padding: 5px;
            border: 1px solid #e5e5e5;
            background-color: #fff;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            color: #333;
        }
        .custom-pagination button.active {
          border: 1px solid #2d8cf0;
          color: #2d8cf0;
        }
    </style>
</head>

<body>
    <div class="logo">
        <img src="/seeyon/apps_res/plugin/relocationData/img/logo.png" />
    </div>
    <div id="app" :class="{'is-person-data':is_person_data}"
        :style="{'grid-template-columns': is_person_data?'100%':''}">
        <div class="left" v-if="!is_person_data">
            <ul class="nav">
                <li class="nav_li" v-for="nav in nav_list" :style="{'padding': nav.children?0:''}">
                    <div class="item" @click="clickNav(nav, 'status')" :class="{'active': nav.key === current_nav.key}">
                        <p class="text" style="position: relative;">
                            <img v-if="nav.children" src="/seeyon/apps_res/plugin/relocationData/img/more.svg"
                                style="width: 5px;rotate: 90deg; position: absolute; right: 120%; top: 6px;" />
                                {{nav.text}}
                        </p>
                        <p class="num" v-if="nav.num || nav.num === 0" :style="{'color': nav.color}">{{nav.num}}</p>
                        <p class="num" v-else>
                            <span class="on_site_color">{{nav.on_site || 0}}</span>
                            <span class="split_line split_color">/</span>
                            <span class="business_trip_color">{{nav.business_trip || 0}}</span>
                            <span class="split_line split_color">/</span>
                            <span class="routation_leave_color">{{nav.routation_leave || 0}}</span>
                        </p>
                    </div>
                    <ul class="nav_children" v-if="nav.children">
                        <li class="nav_children_li" @click="clickNav(nav2, 'group')"
                            :class="{'active': nav2.key === current_nav.key}" v-for="nav2 in nav.children">
                            <p class="text">{{nav2.text}}</p>
                            <p class="num">
                                <span class="on_site_color">{{nav2.on_site || 0}}</span>
                                <span class="split_line split_color">/</span>
                                <span class="business_trip_color">{{nav2.business_trip || 0}}</span>
                                <span class="split_line split_color">/</span>
                                <span class="routation_leave_color">{{nav2.routation_leave || 0}}</span>
                            </p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right" :style="{'grid-template-columns': is_person_data?'100%':''}">
            <div class="right-head">
                <ul>
                    <li class="search-name" v-if="is_person_data">
                        {{current_person_data.name}}
                    </li>
                    <li class="search-input" v-else>
                        <input v-model="search_name" placeholder="search"/>
                        <img @click="getGroupData(true)" src="/seeyon/apps_res/plugin/relocationData/img/search.svg">
                    </li>
                    <li class="search-year">
                        <img @click="changeYear(-1)" src="/seeyon/apps_res/plugin/relocationData/img/more.svg" :style="{'opacity':year == 2024? '0.2':''}" style="rotate: 180deg;" />
                        &nbsp;{{year}}年&nbsp;
                        <img @click="year == current_year ? '': changeYear(1)" :style="{opacity: year == current_year ? '0.2':'1'}" src="/seeyon/apps_res/plugin/relocationData/img/more.svg" />
                    </li>
                    <li class="search-status">
                        <span>
                            <span class="small-point on_site_bg_color"></span>On Site
                        </span>
                        <span>
                            <span class="small-point business_trip_bg_color"></span>Business Trip
                            <span v-show="type == 'person'" style="position: relative;">
                                <!-- (<span class="small-point-circle"><span class="small-point business_trip_bg_color"></span></span>International business trip  
                                <span class="small-point-circle" style="background-color:rgba(2, 29, 178, 1);"><span class="small-point business_trip_bg_color"></span></span>Iraq domestic trip) -->
                                (<img class="icon" src="/seeyon/apps_res/plugin/relocationData/img/trip-in.svg">International business trip  
                                <img class="icon" src="/seeyon/apps_res/plugin/relocationData/img/trip-out.svg">Iraq domestic trip)
                            </span>
                        </span>
                        <span>
                            <span class="small-point routation_leave_bg_color"></span>Routation Leave
                        </span>
                    </li>
                </ul>
            </div>
            <!-- 部门或某种状态下的数据 -->
            <div class="right-content thin-scroll not-person" v-if="type != 'person'">
                <table cellspacing="0" style="height: auto;">
                    <tr class="table-head">
                        <td v-for="(item, index) in table_columns">
                            {{item.text}}
                            <span v-if="item.can_sort" class="ivu-table-sort">
                                <i class="ivu-icon ivu-icon-md-arrow-dropup" @click="setSort(index, 2)" :class="{'on': item.sort == 2}"></i>
                                <i class="ivu-icon ivu-icon-md-arrow-dropdown" @click="setSort(index, 1)" :class="{'on': item.sort == 1}"></i>
                            </span>
                        </td>
                    </tr>
                    <tr v-if="getting_group_data">
                        <td colspan="15" style="border: none;background: none;position: relative;height: 12vh;">
                            <i-spin fix>
                                <i-icon type="ios-loading" size=18 class="demo-spin-icon-load"></i-icon>
                                <div>Loading</div>
                            </i-spin>
                        </td>
                    </tr>
                    <tr v-else class="table-body table-body1" v-for="item in table_datas" @click="clickPerson(item)">
                        <td :class="{'name':!!item.name}" v-if="!is_person_data" :style="{'border': item.name ? '':'none', 'background': item.name ? '':'#fff'}">
                            <img v-if="item.status" :src="'/seeyon/apps_res/plugin/relocationData/img/'+item.status+'.svg'" />
                            <span class="text">{{item.name}}</span>
                        </td>
                        <td class="data" style="height: 53px;" :class="{'total': month_item.is_total}"
                            v-for="month_item in item.month_datas">
                            <p v-if="month_item.on_site != 0"><span
                                    class="small-point on_site_bg_color"></span>{{month_item.on_site}}
                            </p>
                            <p v-if="month_item.business_trip != 0"><span
                                    class="small-point business_trip_bg_color"></span>{{month_item.business_trip}}
                            </p>
                            <p v-if="month_item.routation_leave != 0"><span
                                class="small-point routation_leave_bg_color"></span>{{month_item.routation_leave}}
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 选中的个人数据 -->
            <div class="right-content thin-scroll" :style="{'height': is_person_data? '90vh': ''}" v-if="type == 'person'">
                <table cellspacing="0" :style="{'height': is_person_data? '100%': ''}">
                    <tr v-if="current_person_data.user_id" class="table-head">
                        <td v-if="is_person_data" v-for="item in table_columns" v-show="table_datas.length">
                            {{item.text}}
                        </td>
                        <td v-if="current_person_data.user_id && !is_person_data" style="width: 14%;">
                            {{table_columns[0].text}}
                        </td>
                        <td v-if="current_person_data.user_id && !is_person_data"
                            style="width: 86%;padding: 0 0 0 8px; border:none;background: #fff;vertical-align: top;" colspan="14" rowspan="3">
                            <table cellspacing="0" class="small-table" id="target">
                                <tr class="table-head">
                                    <td v-for="item in table_columns" v-if="!current_person_data.user_id">
                                        {{item.text}}
                                    </td>
                                    <td v-for="item in short_table_columns" v-if="current_person_data.user_id">
                                        {{item.text}}
                                    </td>
                                </tr>
                                <tr class="table-body table-body2">
                                    <td class="data" style="height: 53px;" :class="{'total': month_item.is_total}"
                                        v-for="month_item in current_person_data.month_datas">
                                        <p v-if="month_item.on_site != 0"><span
                                                class="small-point on_site_bg_color"></span>{{month_item.on_site}}
                                        </p>
                                        <p v-if="month_item.business_trip != 0"><span
                                                class="small-point business_trip_bg_color"></span>{{month_item.business_trip}}
                                        </p>
                                        <p v-if="month_item.routation_leave != 0"><span
                                            class="small-point routation_leave_bg_color"></span>{{month_item.routation_leave}}
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr class="table-body table-body3" v-if="(current_person_data.user_id && is_person_data) || !current_person_data.user_id">
                        <td v-if="is_person_data" class="data" style="height: 53px;" :class="{'total': month_item.is_total}"
                            v-for="month_item in current_person_data.month_datas">
                            <p v-if="month_item.on_site != 0"><span
                                class="small-point on_site_bg_color"></span>{{month_item.on_site}}
                            </p>
                            <p v-if="month_item.business_trip != 0"><span
                                class="small-point business_trip_bg_color"></span>{{month_item.business_trip}}
                            </p>
                            <p v-if="month_item.routation_leave != 0"><span
                                class="small-point routation_leave_bg_color"></span>{{month_item.routation_leave}}
                            </p>
                        </td>
                    </tr>
                    <tr class="table-body table-body4" v-for="(item, index) in table_datas" v-if="table_datas.length >= 1">
                        <!-- <td :class="{'name':!!item.name}" v-if="!is_person_data" @click="clickPerson(item)"
                            :style="{'background': item.user_id == current_person_data.user_id ? 'url(/seeyon/apps_res/plugin/relocationData/img/return.svg) no-repeat center right 3px rgba(45, 127, 240, 1)':'#f4f5fe', 'color': item.user_id == current_person_data.user_id? '#fff':'', 'border-bottom': item.user_id ? '':'none' }">
                            <span v-if="item && item.name">
                                <img v-if="item.status" :src="'/seeyon/apps_res/plugin/relocationData/img/'+item.status+'.svg'" />
                                {{item.name}}
                            </span>
                            <span v-else>
                                &nbsp;<br><br>
                            </span>
                        </td> -->
                        <td v-if="index == 0" :class="{'name':!!item.name}" :rowspan="is_person_data? 1:100" v-if="!is_person_data" style="padding: 0;border: 0px;">
                            <table class="name-table" v-if="!is_person_data" cellspacing="0">
                                <tr v-for="(item, index) in table_datas">
                                    <td :class="{'name-table-name':!!item.name}"  :style="{'background': item.user_id == current_person_data.user_id ? 'url(/seeyon/apps_res/plugin/relocationData/img/return.svg) no-repeat center right 3px rgba(45, 127, 240, 1)':'', 'color': item.user_id == current_person_data.user_id? '#fff':'', 'border-bottom': item.user_id ? '':'none' }" @click="clickPerson(item)">
                                        <span v-if="item && item.name">
                                            <img v-if="item.status" :src="'/seeyon/apps_res/plugin/relocationData/img/'+item.status+'.svg'" />
                                            {{item.name}}
                                        </td>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td v-if="index == 2" colspan="14" rowspan="100"
                            style="vertical-align: top; border: 0;"
                            :style="{'padding': is_person_data ? '0 0 8px 0':'0 0 0 8px'}">
                            <div class="calendars">
                                <div class="calendar" v-for="(month_data, index) in month_datas.list">
                                    <div class="month-title">{{month_data}}</div>
                                    <div class="month-content">
                                        <div class="week">
                                            <div class="week-day" v-for="item in weekDay" :key="index">{{ item }}</div>
                                        </div>
                                        <div class="content" v-if="month_datas.datas[month_data]">
                                            <div class="days">
                                                <div class="item"
                                                    v-for="(item, i) in month_datas.datas[month_data].all_data"
                                                    :key="item">
                                                    <!-- <div class="day" :style="getStyle(item, month_data, index)">
                                                        {{ item.date }}
                                                    </div> -->
                                                    <div v-html="getHtml(item, month_data, index)"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="table-body table-body5" v-if="current_person_data.user_id && !is_person_data">
                        <td></td>
                    </tr>
                </table>
            </div>
            <div class="right-footer" v-show="!current_person_data.user_id" v-if="!is_person_data"
                style="display: flex; justify-content: right; align-items: center;">
                <p style="margin-right: 14px;">{{ page_data.total }} items in total</p>
                <i-page v-if="page_data.total > (page_data.limit * 10)" @on-change="changePage" :current="page_data.page" :page-size="page_data.limit" :total="page_data.total"></i-page>
                <div v-else class="custom-pagination">
                    <button v-for="page in pages" :key="page" :class="{ active: page_data.page === page }" @click="changePage(page)">
                      {{ page }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/seeyon/apps_res/plugin/relocationData/js/content.js?v=2"></script>
</html>